<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>redis秒杀</title><!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
    <h1>模拟用户端抢货区</h1>
    <div>
        选择用户：
        <el-select v-model="user" placeholder="请选择用户">
            <el-option label="测试（无唯一购买限制）" :value="0"></el-option>
            <el-option label="用户A" :value="1"></el-option>
            <el-option label="用户B" :value="2"></el-option>
            <el-option label="用户C" :value="3"></el-option>
        </el-select>
    </div>
    <div style="border:1px solid red;display: flex;flex-direction: row;overflow-x: auto">
        <div v-for="(item,index) in list" style="border: 1px solid green">
            <div>商品编号：{{item.productId}}</div>
            <!-- 图片 -->
            <img v-bind:src="staticImg" width="200px"/>
            <!-- 秒杀 -->
            <div style="text-align: center">
                剩{{item.num < 0 ? "?":item.num}}件
                <input :disabled="item.num <= 0 || item.time <= 0" type="button" v-on:click="seckill(item.productId)"
                       :value="'秒 杀（'+formatTime(item.time,item.num)+'）'"/>
            </div>
        </div>
    </div>
    <div>
        <h1>模拟后台备货区</h1>
        <div style="margin-bottom: 5px">
            <input v-model="form.productId" placeholder="请输入商品编号"/>
            <button @click="toAddItem">添加到秒杀区</button>
        </div>
        <table border="1px">
            <thead>
            <th>商品名称</th>
            <th>商品图片</th>
            <th>商品库存</th>
            <th>商品秒杀时间</th>
            <th>操作</th>
            </thead>
            <template v-for="(item,index) in list">
                <tr>
                    <td>{{item.productId}}</td>
                    <td><img v-bind:src="staticImg" width="50px"/></td>
                    <td>{{item.num < 0 ? "?":item.num}}</td>
                    <td>{{formatTime(item.time,item.num)}}</td>
                    <td>
                        <!--商品售空或未售空：可直接下架-->
                        <button @click="endKill(item.productId)" v-show="item.num >= 0">结束（结束并移除）</button>
                        <!--商品剩余-1，说明是预上架-->
                        <input v-model="item.numTemp" v-show="item.num < 0" placeholder="请输入货量"/>
                        <input v-model="item.timeTemp" v-show="item.num < 0" placeholder="请设置时间（秒）"/>
                        <button @click="beginKill(index)" v-show="item.num < 0">上架（开始秒杀）</button>
                    </td>
                </tr>
            </template>
        </table>
    </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            //默认商品图片（假的）
            staticImg: "/img/1.jpg",
            //商品列表
            list: [],
            //用户选择
            user: 0,
            //添加商品表单
            form: {
                productId: null,
            }
        },
        created() {
            this.getSecKillList();
        },
        methods: {
            /**
             * 获取秒杀列表
             */
            getSecKillList() {
                //获取秒杀列表
                axios.get("http://localhost:8081/product/getSecKillList")
                    .then((res) => {
                        //拿到数据
                        this.list = res.data.list;
                        //每隔一秒钟时间减一，做一个动态剩余时间展示
                        this.list.forEach((item, index) => {
                            setInterval(() => {
                                item.time--;
                                if (item.time == 0) {
                                    alert("商品编号为" + item.productId + "的秒杀已结束");
                                }
                            }, 1000);
                        });
                    })
            },
            /**
             * 后台添加商品到秒杀区
             */
            toAddItem() {
                let param = new URLSearchParams();
                let that = this;
                param.append("productId", parseInt(this.form.productId));
                axios({
                    method: 'post',
                    url: 'http://localhost:8081/product/toAddItem',
                    data: param
                }).then(function (response) {
                        that.getSecKillList();
                        if (response.data == true) {
                            alert("添加成功");
                        } else {
                            alert("添加失败，商品已存在");
                        }

                    },
                    function (error) {
                        that.getSecKillList();
                        alert("发生错误");
                    });
            },
            /**
             * 开始秒杀
             * @param index 秒杀商品在列表中的索引
             */
            beginKill(index) {
                let param = new URLSearchParams();
                let that = this;
                param.append("productId", this.list[index].productId);
                param.append("num", parseInt(this.list[index].numTemp));
                param.append("time", parseInt(this.list[index].timeTemp));
                axios({
                    method: 'post',
                    url: 'http://localhost:8081/product/beginKill',
                    data: param
                }).then(function (response) {
                        that.getSecKillList();
                        if (response.data == true) {
                            alert("秒杀已开始");
                        } else {
                            alert("执行失败");
                        }

                    },
                    function (error) {
                        that.getSecKillList();
                        alert("发生错误");
                    });
            },
            /**
             * 结束活动
             * @param productId 商品编号
             */
            endKill(productId) {
                let param = new URLSearchParams();
                let that = this;
                param.append("productId", productId);
                axios({
                    method: 'post',
                    url: 'http://localhost:8081/product/endKill',
                    data: param
                }).then(function (response) {
                        that.getSecKillList();
                        if (response.data == true) {
                            alert("秒杀已结束");
                        } else {
                            alert("执行失败");
                        }

                    },
                    function (error) {
                        that.getSecKillList();
                        alert("发生错误");
                    });
            },
            /**
             * 执行秒杀
             * @param productId 商品编号
             */
            seckill: function (productId) {
                let param = new URLSearchParams()
                let that = this;
                param.append('productId', productId)
                //如果你选择了用户，那么就把用户的id传过去
                if (parseInt(that.user) > 0) {
                    param.append('userId', that.user)
                }
                axios({
                    method: 'post',
                    url: 'http://localhost:8081/product/doSeckill',
                    data: param
                }).then(function (response) {
                        that.getSecKillList();
                        switch (parseInt(response.data)) {
                            case -4: {
                                that.$message.warning("提交信息有误，请稍后重试");break;
                            }
                            case -3: {
                                that.$message.warning("您已秒杀该商品，无法再次购买");break;
                            }
                            case -2: {
                                that.$message.error('活动已结束，再看看其他商品吧');break;
                            }
                            case -1: {
                                that.$message.error('秒杀还未开始，请稍后再试');break;
                            }
                            case 0: {
                                that.$message.warning("抢光了");break
                            }
                            default: {
                                that.$message.success('秒杀成功');break
                            }
                        }
                    },
                    function (error) {
                        that.getSecKillList();
                        that.$message.error('发生错误');
                    });

            },
            /**
             * 时间格式化（剩余秒杀时间单位是秒 -> 转日期格式）
             * 121 -> 剩2分1秒
             * @param time 时间
             * @param num 商品剩余数量
             * @returns {string|string}
             */
            formatTime(time, num) {
                let day = parseInt(time / (60 * 60 * 24)) > 0 ? parseInt(time / (60 * 60 * 24)) + "天" : "";
                let hour = parseInt(time / (60 * 60) % 24) > 0 ? parseInt(time / (60 * 60) % 24) + "小时" : "";
                let min = parseInt(time / 60 % 60) > 0 ? parseInt(time / 60 % 60) + "分" : "";
                let sec = parseInt(time % 60) > 0 ? parseInt(time % 60) + "秒" : "";
                if (num > 0) {
                    //如果还有货，那么当还有时间就返回剩余时间，否则说明结束了
                    return time > 0 ? "剩" + day + hour + min + sec : "已结束";
                } else if (parseInt(num) === 0) {
                    //如果没有货了，那么就返回已抢光
                    return "已被抢光";
                } else {
                    //如果货物数量为-1，则说明秒杀活动还未开始
                    return "秒杀未开始";
                }
            },

        }
    });

</script>

</body>
</html>